<template>
    <div class="goodsinfo_container">
        <!-- 小球动画 -->
        <transition @before-enter="beforeEnter" 
        @enter="enter" @after-enter="afterEnter">
         <div class="ball" v-show="this.ball"></div>
        </transition>
       
            <!-- 头部 -->
            <div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
                        <!-- 轮播图区 -->
						<swiper-a :swipedata="list" :isfull="false"></swiper-a>
					</div>
				</div>
			</div>
            <!-- 中间 -->
            <div class="mui-card">
				<div class="mui-card-header">
                    商品的名称标题
                </div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<p class="price">
                            市场价：<del>#2399</del>&nbsp;&nbsp; 销售价：<span class="price_smmail">$2199</span>
                        </p>
                        <p>
                            <span>购买数量</span>
                            <span>
                                    <!-- 子组件向父组件传递值，设置接受方法 -->
                                 <numverbox-a @getcount="getSelectedCount" :number="counts"></numverbox-a>
                            </span>
                           
                        </p>
                        <p>
                            <mt-button type="primary" size="small">立即购买</mt-button>
                            <mt-button type="danger" size="small" @click="ballshow">加入购物车</mt-button>
                        </p>
					</div>
				</div>
			</div>
            <!-- 尾部 -->
            <div class="mui-card">
				<div class="mui-card-header">商品参数</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<p>商品货号 : </p>
                        <p>库存情况 : </p>
                        <p>上架时间 : </p>
					</div>
				</div>
				<div class="mui-card-footer">
                    <mt-button  type="primary" size="large" plain @click="introduce"> 图文介绍</mt-button>
                    <mt-button  type="danger" size="large" plain  class="goodinfo_content" @click="comment"> 商品评论</mt-button>
                </div>
			</div>

            <!-- 如果能够拿到商品的详细信息 -->
                <!-- <div class="mui-card">
				<div class="mui-card-header">商品参数</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<p>商品货号 : {{goods.goods_no}}</p>
                        <p>库存情况 : {{goods.}}</p>
                        <p>上架时间 : {{goods.add_tiem | dataFormate}}</p>
					</div>
				</div>
				<div class="mui-card-footer">
                    <mt-button  type="primary" size="large" plain > 图文介绍</mt-button>
                    <mt-button  type="danger" size="large" plain  class="goodinfo_content"> 商品评论</mt-button>
                </div>
			</div> -->
    </div>  
</template>
<script>
import swiper from '../swipers/swiper.vue'
import numverbox from '../subcontent/numberbox.vue'
export default {
    data() {
        return {
            id: this.$route.params,  // 商品的id
            list: [], // 商品的轮播图
            goods: {}, // 商品的具体信息
            ball: false,
            selectedcount: 1,
            counts: 20
        }
    },
    created() {
        this.getshow()
        this.getgoods()
    }
    ,
    methods: {
        // 获取对应商品的具体数据,
        getshow() {
            this.$http.get('api/getthennnnnn' + this.id).then(function(res) {
                if(res.body.status ==0){
                    // 给每个对象创建一个img属性，且这个属性值来自于src
                    res.body.message.array.forEach(ele => {
                        ele.img = ele.src
                    });
                    this.list = res.body.message
                } else {
                    Toast('商品具体信息获取失败')
                }
            })
        },
        getgoods() {
            this.$http.get('api/goods/getinfo' + this.id).then(function(res) {
                if (res.body.message == 0) {
                    this.goods = res.body.message
                }else {
                    Toast('商品信息没有拿到')
                }
            })
        },
        introduce() {
            this.$router.push("/login/goodsintro" + this.id);
        },
        comment() {
            this.$router.push("/login/goodcomment" + this.id);
        },
        ballshow() {
            // 添加到购物车
            this.ball = !this.ball
            // var shopplace = document.querySelector('#shopplace')
            // shopplace.innerHTML = this.selectedcount
   
            // 拼接商品数据   { id: 商品的id, price: 商品的价格, count: 商品的数量, selected: 商品是否选中，默认true }
            var goodsinfo = {
                id: this.id,
                price: 11,//this.goods.price
                count:  this.selectedcount,    //this.goods.count,
                seleted: true
            }
            this.$store.commit('increment',goodsinfo)
        },
        // 动画钩子函数
        beforeEnter(el) {
            el.style.transform = "translate(0, 0)";
        },
        enter(el, done) {

            // getBoundingClientRect()  返回的是一个DOMRECT对象，是一组矩形集合，我们这次所使用的返回值主要是left,top,bottom和right
                const ballplace = document.querySelector('.ball');
                console.log(ballplace.offsetTop);
                console.log(ballplace.offsetLeft);

                const shopplace = document.querySelector('#shopplace')
                var yend = shopplace.getBoundingClientRect().top - ballplace.getBoundingClientRect().top
                var xend = shopplace.getBoundingClientRect().left - ballplace.getBoundingClientRect().left
    

                el.offsetWidth;  // 这个必须写才有动画
                el.style.transform = `translate(${xend}px, ${yend}px)`;
                el.style.transition = "all 1s cubic-bezier(.4,-0.3,1,.68)";
        done()
        },
        afterEnter(ele) {
            this.ball = !this.ball
        },
        // 这是子组件向父组件传递的值
        getSelectedCount(count) {
            this.selectedcount = count
            
        }
    },
    // 调用自己封装好轮播图，
    components: {
        'swiper-a':swiper,
        'numverbox-a':numverbox
    }
}
</script>
<style lang="scss" scoped>
    .goodsinfo_container {
        overflow: hidden;
        background-color: #ccc;
        .price {
            .price_smmail{
                color: red;
                font-weight: 700;
            }
        }
        .mui-card-footer {
            display: block;
            .goodinfo_content {
                margin-top: 10px;
            }
        }
        .ball {
            position: absolute;
            top: 386px;
            left: 136px;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: red;
            z-index: 999;
        
        }
    }
</style>